<template>
	<div style="padding: 10px;">
		<el-row>
			<el-col :span="20">
				<!-- category -->
				<div class="label-wrap category">
					<label for="">分类</label>
					<div class="warp-content">
						<el-row :gutter="16">
							<el-col :span="3">
								<Select :config='data.option' :selectData.sync='data.selectValue' />
							</el-col>
							<el-col :span="5">
								<el-input placeholder="请输入搜索的关键字" v-model='data.key_word'></el-input>
							</el-col>
							<el-col :span="15">
								<el-button type="danger" @click='search'>搜素</el-button>
							</el-col>
						</el-row>
					</div>
				</div>
			</el-col>

			<el-col :span="4">
				<el-button type='danger' class='pull-right' @click='addUser'>添加用户</el-button>
			</el-col>
		</el-row>

		<!-- 表格  -->
		<div class="black-space-30"></div>
		<Tabel :config='data.config' :deletData.sync='data.deletData' ref='getDom'>
			<!-- 插槽实现表格双向绑定 自定义 -->
			<template #status='slotData'>
				<el-switch v-model="slotData.data.status" active-color="#13ce66" inactive-color="#ff4949" active-value="2"
				 inactive-value="1" @change='changeSwitch(slotData.data)'>
				</el-switch>
			</template>
			<template #operation='slotData'>
				<el-button size='small' type='danger' @click='operation(slotData.data)'>删除</el-button>
				<el-button size='small' type='success' @click='edit(slotData.data)'>编辑</el-button>
			</template>
			<template #tableFooter>
				<el-button size='small' type='success' @click='deletAry'>批量删除</el-button>
			</template>
		</Tabel>
		<!-- 弹窗  -->
		<Add :flag.sync='data.flag' :editObj='data.editObj'></Add>
	</div>
</template>

<script>
	import {
		reactive,
		ref,
		onMounted,
		watch
	} from "@vue/composition-api";
	import Select from '@/components/Select'
	import Tabel from '@/components/Tabel'
	import {
		userList
	} from '@/api/requestUrl.js'
	import {
		deleteUser,activetUser
	} from '@/api/news.js'
	import Add from './dialog/add.vue'
	import {
		global
	} from '@/utils/global.js'
	export default {
		name: 'userIndex',
		components: {
			Select,
			Tabel,
			Add
		},
		setup(props, {
			root
		}) {
			const {
				confirm
			} = global()
			// ref ----除了refs拿到dom这种也行 保证名字一样--- 坑：记住只能走onmounted之后才能拿到 所以不能再setup拿到
			const getDom = ref()

			// data
			const data = reactive({
				option: {
					init: ['truename', 'phone', 'email']
				},
				config: {
					selection: true,
					tHead: [{
							label: '邮箱/用户',
							field: 'username',
							width: 180
						},
						{
							label: '真实姓名',
							field: 'truename',
							width: 180
						},
						{
							label: '手机号',
							field: 'phone',
							width: 180
						},
						{
							label: '地区',
							field: 'region',
							width: 180
						},
						{
							label: '角色',
							field: 'role'
						},
						{
							label: '禁启用状态',
							field: 'status',
							columnType: "slot",
							slotName: 'status'
						},
						{
							label: '操作',
							columnType: "slot",
							slotName: 'operation'
						}
					],
					requestData: {
						url: userList,
						data: {
							pageNumber: 1,
							pageSize: 4
						},
						layout: "total, sizes, prev, pager, next, jumper"
					}
				},
				selectValue: {},
				key_word:'',
				flag: false,
				deletData: {
					id: []
				},
				editObj:{}
			})

			// methods
			// 删除单个
			const operation = (item) => {
				// 删除
				const fn = async () => {
					const res = await deleteUser({
						id: [item.id]
					})
					if (res.resCode === 0) {
						root.$message.success('删除成功')
						getDom.value.updataData()
					}
				
				}
				confirm({
					content: '确定删除？',
					fn: fn
				})
			}
			// 批量删除
			const deletAry = () => {
				if(data.deletData.id.length<=0){
					return root.$message('请选择！！！')
				}
				const fn = async () => {
					const res = await deleteUser({
						id: data.deletData.id
					})
					if (res.resCode === 0) {
						root.$message.success('删除成功')
						getDom.value.updataData()
						data.deletData.id=[]
					}

				}
				confirm({
					content: '确定删除？',
					fn: fn
				})

			}
			// 编辑 
			const edit = (item)=>{
				data.editObj = item 
				data.editObj.isEdit = true 
				data.flag=true
			}
			const addUser=()=>{
				data.editObj = {}
				data.editObj.isEdit = false 
				data.flag=true
			}
			const changeSwitch = (item)=>{
				activetUser({id:item.id,status:item.status})
				getDom.value.updataData()
			}
			const search =()=>{
				let requesttData = {
				    [data.selectValue.value] : data.key_word
				}
				getDom.value.updataData(requesttData)
			}
			return {
				data,
				operation,
				deletAry,
				getDom,
				edit,
				addUser,
				changeSwitch,
				search
			}
		}
	}
</script>

<style lang='scss' scoped>
	.label-wrap {
		&.category {
			@include labelDom(left, 60, 40)
		}
	}
</style>
